<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>LTC China</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/img/logo.png" rel="shortcut icon">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">
    <script src="/static/js/countdown.js"></script>
    <script type="text/javascript">
        window.onload = function (){countdown();}
    </script>
    <!--[if lt IE 9]>
        <script src="/static/js/html5shiv.js"></script>
        <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <script src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
        .box {
            height: 350px;
            width: 100%;
            overflow: auto;
        }
        .navbar-brand
        {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            margin: auto;
            padding:0;
            text-align: center;
        }
        .navbar-brand > img{
          display: inline;
        }
    </style>
  </head>
  <body style="margin:0;padding:0"> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
{% if is_login %}
      <a class="navbar-brand" href='https://lpars.cn.ibm.com/profile/'><img style="" width="50px" height="50px" src="{{ view_user.lbforum_profile.get_large_avatar_url }}" alt=""/></a>
{% endif %}
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left" style="margin-left: 50px">
        <li><a href="https://lpars.cn.ibm.com">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right" style="margin-right: 50px;">
{% if not is_login %}
        <li><a href='https://lpars.cn.ibm.com/accounts/signup/'>Signup</a></li>
        <li><a href='https://lpars.cn.ibm.com/accounts/login/'>Login</a></li>
{% else %}
        <li><a href='https://lpars.cn.ibm.com/accounts/logout/'>Logout</a></li>
{% endif %}
      </ul>
    </div><!-- /.navbar-collapse -->
</nav>
  <div id="msg" style="padding-top:2px;width:100%;height:100px;text-align:center;background-color:#F8C858;margin-bottom:5px;margin-top:50px">
    <h3>Attention</h3>
    <p><font color=#F00813 size=4em>
	Please refer to the <i><a href="https://ltc3.linux.ibm.com/wiki/Frobisher/zHypSystems" target="_blank">Wiki</a></i> to get the IP/Disk/Network 
	you can use before the installation to avoid the damage to others' data. 
    </font></p>
  </div>
  <main>
    <div class="container-fluid" id="ctt">
      <div class="tabbable" id="tabs-142563">
  	  <ul class="nav nav-tabs">
  {% if not active %}
  	  	<li class="active">
  {% else %}
          <li>
  {% endif %}
  	  		<a href="#panel-206449" data-toggle="tab">LPARs</a>
  	  	</li>
  {% if active %}
  	  	<li class="active">
  {% else %}
          <li>
  {% endif %}
  	  		<a href="#panel-983158" data-toggle="tab">Lab Servers</a>
  	  	</li>
  	  </ul>
        <div class="tab-content">
  {% if not active %}
          <div class="tab-pane active" id="panel-206449">
  {% else %}
          <div class="tab-pane" id="panel-206449">
  {% endif %}
            <div class="box">
            <table class="table"
            style="text-align:center; vertical-align:middle; margin-top: 40px;background:rgba(255,255,255,0.8) none repeat scroll !important;">
              <tr>
                <th style="text-align:center; vertical-align:middle">Name</th>
                <th style="text-align:center; vertical-align:middle">Disks</th>
                <th style="text-align:center; vertical-align:middle">IP</th>
                <th style="text-align:center; vertical-align:middle">Available</th>
                <th style="text-align:center; vertical-align:middle">Previous User</th>
                <th style="text-align:center; vertical-align:middle">Reserved-by</th>
                <th style="text-align:center; vertical-align:middle">Time Left</th>
  {% if is_login %}
                <th style="text-align:center; vertical-align:middle">Action</th>
  {% endif %}
                </tr>
  {% for lpar in lpars %}
  {% ifnotequal lpar.name "LPAR54" %}
              <tr>
                <td><i>{{ lpar.name }}</i></td>
                <td><i>{{ lpar.disks }}</i></td>
                <td><i>{{ lpar.ip }}</i></td>
                <td><i>{%if lpar.available %}Yes{% else %}No{% endif %}</i></td>
  {% if lpar.last_rsv_person %}
                <td><i>{{ lpar.last_rsv_person }}</i></td>
  {% else %}
                <td><i>N/A</i></td>
  {% endif %}
                <td><i>{% if lpar.rsv_person %}{{ lpar.rsv_person}}{% else %} N/A {% endif %}</i></td>
                <td><i>{% if lpar.rsv_person %}<div id='{{ lpar.name }}'value='{{ lpar.reservation_time | date:"H:i:s" }}'></div>{% else %} N/A {% endif %}</i></td>
  {% if is_login %}
                <td>
  {% ifequal lpar.rsv_person user_name %}
                  <form action="/cancel/" method="GET">
                    <input type="hidden" name="lparid" value="{{ lpar.id }}">
                    <button type="submit" class="btn btn-warning btn-xs" data-toggle="tooltip" data-placement="left" title="Release this LPAR">Cancel</button>
                  </form> 
  {% endifequal %}
  {% if lpar.available %}
                  <form action="/reserve/" method="GET">
                    <input type="hidden" name="lparid" value="{{ lpar.id }}">
                    <button type="submit" class="btn btn-success btn-xs" data-toggle="tooltip" data-placement="left" title="LPAR will be released after 4 hours from this reservation on">Reserve</button>
                  </form> 
                </td>
  {% endif %}
  {% endif %}
              </tr>
  {% endifnotequal %}
  {% endfor %}
            </table>
          </div>
  	    </div>
  {% if not active %}
          <div class="tab-pane" id="panel-983158">
  {% else %}
          <div class="tab-pane active" id="panel-983158">
  {% endif %}
            <div class="box">
            <table class="table" style="text-align:center; vertical-align:middle; margin-top: 40px;background:rgba(255,255,255,0.8) none repeat scroll !important;">
              <tr>
                <th style="text-align:center; vertical-align:middle">Name</th>
                <th style="text-align:center; vertical-align:middle">IP</th>
                <th style="text-align:center; vertical-align:middle">IMM IP</th>
                <th style="text-align:center; vertical-align:middle">Available</th>
                <th style="text-align:center; vertical-align:middle">Reserved-by</th>
  {% if is_login %}
                <th style="text-align:center; vertical-align:middle">Action</th>
  {% endif %}
                </tr>
  {% for server in servers %}
              <tr>
                <td><i>{{ server.name }}</i></td>
                <td><i>{{ server.ip }}</i></td>
                <td><i>{{ server.imm_ip }}</i></td>
                <td><i>{%if server.available %}Yes{% else %}No{% endif %}</i></td>
                <td><i>{% if server.rsv_person %}{{ server.rsv_person}}{% else %} N/A {% endif %}</i></td>
  {% if is_login %}
                <td>
  {% ifequal server.rsv_person user_name %}
                  <form action="/ccl/" method="GET">
                    <input type="hidden" name="serverid" value="{{ server.id }}">
                    <button type="submit" class="btn btn-warning btn-xs"
                        data-toggle="tooltip" data-placement="left" title="Release this server">Cancel</button>
                  </form> 
  {% endifequal %}
  {% if server.available %}
                  <form action="/rsv/" method="GET">
                    <input type="hidden" name="serverid" value="{{ server.id }}">
                    <button type="submit" class="btn btn-success btn-xs" data-toggle="tooltip" data-placement="left" title="Server will be released after 4 hours from this reservation on">Reserve</button>
                  </form> 
                </td>
  {% endif %}
  {% endif %}
              </tr>
  {% endfor %}
            </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <div style="margin-top:20px;margin-right:15px;" class="pull-right">
      <p><i><b>HMC1(LPAR55-59)</b> Username: <b>sysprog</b> Password: <b>o8cpav4u</b><br/>Please feel free to contact <a href="mailto:senwang@cn.ibm.com">senwang@cn.ibm.com</a> to get support.</i></p>
  </div>

<div id="footer" style="margin-top:100px;">
  <nav class="navbar navbar-content-center navbar-default navbar-fixed-bottom"> 
      <p style="padding: 3px;">
        <center>Linux Technology Center @ IBM China</center>
      </p>
  </nav>
</div>

<script>
$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
$("#msg").click(function(){
  $(this).hide("slow");
  $("#ctt").css("margin-top", "100px");
});
</script>

</body>
</html>
